<template>
  <layout :appHeader="{ title: $route.name }">
    <view class="policy-info">
      <view class="card-header">基本信息:</view>
      <view class="body">
        <view class="policy-item">
          <span class="e-label">姓名:</span>
          <span class="e-content">{{ userInfo.name }}</span>
        </view>
        <view class="policy-item">
          <span class="e-label">證件號:</span>
          <span class="e-content">{{ userInfo.idNumber }}</span>
        </view>
        <view class="policy-item">
          <span class="e-label">保單號:</span>
          <span class="e-content">{{ userInfo.policyNumber }}</span>
        </view>
        <view class="policy-item">
          <span class="e-label">電話號碼:</span>
          <span class="e-content">{{ userInfo.mobile }}</span>
        </view>
        <view class="policy-item">
          <span class="e-label">家庭住址:</span>
          <span class="e-content">{{ userInfo.address }}</span>
        </view>
      </view>
    </view>

    <view class="policy-info">
      <view class="card-header">审核流程:</view>
      <view class="process-body">
        <u-steps
          :list="procedures"
          :current="currentProcedure && currentProcedure.sn - 2"
          active-color="#515cc3"
          direction="column"
          mode="number"
        ></u-steps>
        <!-- <u-time-line>
          <u-time-line-item nodeTop="2" v-for="(item, index) in procedures" :key="index">
            <template v-slot:node>
              <view class="u-node" style="background: #515cc3;">
                <u-icon name="checkmark" color="#fff" :size="20"></u-icon>
              </view>
            </template>
            <template v-slot:content>
              <view>
                <view class="u-order-title" style="margin-top: 0">{{item.procedure.name}}</view>
                <view class="u-order-time">{{formatterDate(item.procedure.dateStarted)}}</view>
              </view>
            </template>
          </u-time-line-item>
        </u-time-line> -->
      </view>
    </view>
  </layout>
</template>
<script>
import tuiTimeAxis from "@/components/thorui/tui-time-axis/tui-time-axis";
import tuiTimeaxisItem from "@/components/thorui/tui-timeaxis-item/tui-timeaxis-item";
export default {
  components: {
    tuiTimeAxis,
    tuiTimeaxisItem,
  },
  data() {
    return {
      procedures: {},
      currentProcedure: {},
      userInfo: {},
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      const that = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      uni.$API.WorkOrder.getWorkOrderById(this.$route.query.id).then((res) => {
        that.procedures = res.data.procedures;
        if (res.data.status === 2) {
          that.currentProcedure = that.procedures.length;
        } else {
          that.currentProcedure = res.data.currentProcedure;
        }
        if (res.data.timeline.length) {
          that.userInfo =
            res.data.timeline[res.data.timeline.length - 1].procedure.data;
        }
        uni.hideLoading();
      });
    },
    formatterDate(value) {
      return uni.$co.Common.parseTime(value);
    },
  },
};
</script>
<style lang="scss">
.policy-info {
  position: relative;
  margin: 24rpx;
  padding: 10rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}
.card-header {
  border-bottom: 1rpx solid #f2f2f2;
  line-height: 100rpx;
  font-weight: bold;
  font-size: 28rpx;
  color: #42475f;
}
.body {
  padding-top: 20px;
}
.policy-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.e-sort {
  display: inline-block;
  font-size: 30rpx;
  font-weight: 800;
  color: #d0d0d0;
  width: 44rpx;
  text-align: center;
}
.e-label {
  display: inline-block;
  margin-left: 20rpx;
  margin-right: 20rpx;
  font-size: 26rpx;
  font-weight: bold;
  color: #42475f;
  width: 100px;
}
.e-content {
  display: inline-block;
  font-size: 26rpx;
  font-weight: 400;
  color: #42475f;
}
.process-body {
  padding: 20rpx;
}

.u-node {
  width: 44rpx;
  height: 44rpx;
  border-radius: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d0d0d0;
}

.u-order-title {
  color: #42475f;
  font-weight: bold;
  font-size: 28rpx;
  margin-bottom: 26rpx;
  margin-top: 9rpx;
}

.u-order-desc {
  color: rgb(150, 150, 150);
  font-size: 28rpx;
  margin-bottom: 6rpx;
}

.u-order-time {
  color: rgb(200, 200, 200);
  font-size: 26rpx;
}
.u-time-axis-item {
  margin-bottom: 50rpx;
}
</style>